<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Getting Started: Serving Web Content</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
table,table tr th, table tr td { border:1px solid #0094ff; }
table { width: 200px; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}   
</style>
</head>
<body>
	<h5>th:utext,th:text,${}</h5>
	<span th:utext="${hello} + ' ' + ${name} + '!'">will be replaced!!</span><br/>
	<span th:text="${hello} + ' ' + ${name} + '!'">will be replaced!!</span><br/>
	<span th:text="${hello + ' ' + name} + '!'">will be replaced!!</span><br/>
	<span th:text="${hello + ' ' + undefined} + '!'">will be replaced!!</span><br/>
	<span th:text="|Welcome to our application, ${bean.name}!|"></span><br/>
	<span th:text="'Welcome to our application, ' + ${bean.name} + '!'"></span><br/>
	<span th:text="${bean.id} + ': ' + |${notfound}, ${bean.name}|"></span><br/>
	Established locale country: <span th:text="${#locale.country}">US</span><br/>
	
	<h5>th:object,*{}</h5>
	<div th:object="${map}">                                                                       
    	<p>Username: <span th:text="*{username}">username</span>.</p>    
	</div>
	
	<h5>th:href,@{}</h5>
	<a href="details.html" th:href="@{world?cid=1}">th:href="@{world?cid=1}"</a><br/>
	<a href="details.html" th:href="@{${name}}">th:href="@{${name}}"</a><br/>
	<a href="details.html" th:href="@{world(beanId=${bean.id},beanName=${bean.name})}">th:href="@{world(beanId=${bean.id},beanName=${bean.name})}"</a><br/>
	<a href="details.html" th:href="@{/th/href/hello} + ${name} + '.html'">th:href="@{th/href/hello.html}"</a><br/>
	<a href="details.html" th:href="@{${name} + '?cid=1'}">th:href="@{${name} + '?cid=1'}"</a>
	<img src="1.png" th:src="@{/images/clear.png}" alt="src/main/resources/static/" />
	
	<h5>格式化</h5>
	<dt>数字</dt>
	<dd th:text="${#numbers.formatDecimal(map.number, 1, 2)}">123</dd>
	<dt>日期</dt>
	<dd th:text="${#dates.format(map.date, 'yyyy-MM-dd HH:mm:ss')}">2017-07-10</dd>
	
	<h5>th:action,th:method,th:field,th:value</h5>
	<form th:action="@{world}" method="post" th:method="post" th:object="${bean}">
		<input type="text" th:field="*{id}"/>
		<input type="text" th:field="*{name}"/>
		<input type="submit"/>
	</form>
	<form th:action="@{world}" method="post" th:method="post" th:object="${map}">
		<input type="text" th:value="*{username}"/>
		<input type="text" th:value="*{number}"/>
		<input type="submit"/>
	</form>
	
	<h5>th:remove="all-but-first",th:each="item:${list}"</h5>
	<table>
		<!-- 用 th:remove 移除除了第一个外的静态数据，用第一个tr标签进行循环迭代显示 -->
		<tbody th:remove="all-but-first">
			<!-- 将后台传出的 productList 的集合进行迭代，用product参数接收，通过product访问属性值 -->
			<tr th:each="item:${list}">
				<!-- 用count进行统计，有顺序的显示 -->
				<td th:text="${itemStat.count}">1</td>
				<td th:text="${item.id}">ID</td>
				<td th:text="${item.name}">LiLei</td>
			</tr>
			<tr>
				<td>1</td>
				<td>1</td>
				<td>A</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>B</td>
			</tr>
      </tbody>
	</table>
	
	<h5>Thymeleaf parser-level comment blocks: ,&lt;!--/* static content */--&gt;</h5>
	<table>
		<!-- Parser-level comment blocks are code that will be simply removed from the template when Thymeleaf parses  -->
		<tbody>
			<tr th:each="item:${list}">
				<td th:text="${itemStat.count}">1</td>
				<td th:text="${item.id}">ID</td>
				<td th:text="${item.name}">LiLei</td>
			</tr>
			<!--/* -->
			<tr>
				<td>1</td>
				<td>1</td>
				<td>A</td>
			</tr>
			<tr>
				<td>2</td>
				<td>2</td>
				<td>B</td>
			</tr>
			<!--  */-->
      </tbody>
	</table>
	
	<h5>th:block,&lt;!--/*/ thymeleaf content /*/--&gt;</h5>
	<table>
		<!--/*/ <th:block th:each="user : ${list}"> /*/-->
		<tr>
			<td th:text="${user.id}">...</td>
			<td th:text="${user.name}">...</td>
		</tr>
		<tr>
			<td colspan="2" th:text="${user}">...</td>
		</tr>
		<!--/*/ </th:block> /*/-->
	</table>
	
	<h5>th:if</h5>
	<p th:if="${bean.name lt '100'}" class="offer">th:if="${bean.name lt '100'}"</p>
	<p th:if="${bean.name gt '100'}" class="offer">th:if="${bean.name gt '100'}"</p>
	
	<h5>th:switch,th:case</h5>
	<p th:switch="${bean.name}">
		<span th:case="''">empty</span>
		<span th:case="'world'">world</span>
		<span th:case="*">Unknown</span>
	</p>
	
	<h5>th:unless,th:placeholder</h5>
	<div>
		<label>姓名<span>&nbsp;</span></label>
		<input type="text" class="form-control" th:unless="${bean.name} eq '' or ${bean.name} eq null" data-required="true" th:placeholder="${bean.name}" />
		<input type="text" th:field="${bean.name}" class="form-control" th:unless="${bean.name} ne null" data-required="true" th:placeholder="请填写您的真实姓名"  />
	</div>
	
	<h5>th:class</h5>
	<td th:class="${bean.id eq ''} ? 'enhanced'" th:text="${bean.name}">name</td>

	<h5>th:field,th:switch,th:case,th:selected</h5>
	<div>
		<label>选择框<span>&nbsp;:</span></label>
		<select th:field="${bean.name}" th:switch="${bean.name}">
			<option value="">请选择</option>
			<option value="hello" th:case="'hello'" th:selected="selected" >hello</option>
			<option value="world" th:case="'world'" th:selected="selected" >world</option>
		</select>
	</div>
	<div>
		<label>选择框<span>&nbsp;:</span></label>
		<select name="${list[1].name}">
			<option value="">请选择</option>
			<option th:if="${list[1].name eq 'world'}" th:selected="selected">world</option>
			<option th:if="${list[1].name eq 'Second'}" th:selected="selected">Second</option>
			<option th:if="${list[1].name eq 'Third'}" th:selected="selected">Third</option>
		</select>
	</div>
	
	<h5>表达式</h5>
	<h6>Arithmetic expressions</h6>
	<p class="label">th:text="${4 * -6 * -2 % 7}":</p>
	<p class="answer" th:text="${4 * -6 * -2 % 7}">123</p>
	
	<h6>Object navigation</h6>
	<p class="label">h:text="${list[0].name}":</p>
	<p class="answer" th:text="${list[0].name}">Credit card</p>
	
	<h6>Object instantiation</h6>
	<p class="label">th:text="${new java.util.Date().getTime()}":</p>
	<p class="answer" th:text="${new java.util.Date().getTime()}">22-Jun-2013</p>
	
	<h6>T operator</h6>
	<p class="label">th:text="${T(java.lang.Math).random()}":</p>
	<p class="answer" th:text="${T(java.lang.Math).random()}">123456</p>
	
	<h5>th:inline="text",[[${}]]</h5>
	<p th:inline="text">inline Hello, [[${bean.name}]]!</p>
	<p th:inline="text">inline Hello, [(${bean.name})]!</p>
	<textarea th:inline="text" style="width:50%;" rows="5">
	Dear [[${hello}]],
	
	it is our sincere pleasure to congratulate your in your birthday:
	    Happy birthday [[${hello}]]!!!
	
	See you soon, [[${hello}]].
	
	Regards,
	    The Thymeleaf team
	</textarea>
	
	<h5>th:inline="javascript",[[${}]]</h5>
	<script th:inline="javascript">
	var username1 = [[${bean.name}]]; //'world'
	var username2 = /*[[${bean.name}]]*/ "Gertrud Kiwifruit"; //'world'
	var username3 = "[[${bean.name}]] goo"; //'world' goo
	var username4 = [[${bean.name + ' goo'}]]; //'world goo'
	var beanNull = /*[[${notfound}]]*/ null; //null
	var bean = /*[[${bean}]]*/ null; //{'id':'','name':'world'}
	var map = /*[[${map}]]*/ null; //{'date':'2017-07-12T10:09:36.852+08:00','number':123.456,'username':'Alpha'}
	var list = /*[[${list}]]*/ null; //[{'id':'','name':'world'},{'id':'2','name':'Second'},{'id':'3','name':'Third'}]
	</script>
	
	<h5>?:</h5>
	<dt>if then else: </dt><dd th:text="'ID of User is ' + (${bean.id ne null and bean.id ne ''} ? ${bean.id} : (${bean.name} ?: 'Unknown'))">if then else</dd>
	<dt>value?:default: th:text="${bean.id ?: bean.name}"</dt><dd th:text="${bean.id ?: bean.name}">value?:default</dd>
	<dt>value?:default: th:text="${bean.id} ?: ${bean.name}"</dt><dd th:text="${bean.id} ?: ${bean.name}">value?:default</dd>
	<dt>value?:default: th:text="${notfound} ?: ${bean.name}"</dt><dd th:text="${notfound} ?: ${bean.name}">value?:default</dd>
	<dt>if then: th:text="${bean.id eq null} ? ${bean.name}"</dt>
	<dd th:text="${bean.id eq null} ? ${bean.name}">if then</dd>
	<dt>if then: th:text="${bean.id} ? ${bean.name}"</dt>
	<dd th:text="${bean.id} ? ${bean.name}">if then</dd>
	
	<h5>_</h5>
	<dt>th:text="${notfound} ?: 'no user authenticated'"</dt>
	<dd th:text="${notfound} ?: 'no user authenticated'">...</dd>
	<dt>th:text="${notfound} ?: _"</dt>
	<dd th:text="${notfound} ?: _">no user authenticated</dd>
	
	<h5>th:with</h5>
	<div th:with="isEven=(${9 % 2 == 0})">
		<span th:text="${isEven}">even</span><br/>
	</div>
	<span th:text="${isEven}">even</span><br/>
	<div th:with="isEven=(|hello ${bean.name}|)">
		<span th:text="${isEven}">even</span><br/>
	</div>
	
	<h5>th:attr,th:attrappend,th:classappend</h5>
	<dt>th:attr="style=${'background-color:gray'},myattr=${bean.name}"</dt>
	<dd th:attr="style=${'background-color:gray'},myattr=${bean.name}">th:attr="style=${'background-color:gray'},myattr=${bean.name}"</dd>
	<dt>th:attrappend="class=${' ' + bean.name}"</dt>
	<dd class="btn" th:attrappend="class=${' ' + bean.name}">th:attrappend="class=${' ' + bean.name}"</dd>
	
	<h5>th:[OTHER]</h5>
	<dt>th:data-myattr="${bean.name}"</dt>
	<dd th:data-myattr="${bean.name}">th:data-myattr="${bean.name}"</dd>
	
	<h5>th:fragment,th:insert,th:replace,th:include</h5>
	<dt>th:insert="include/footer::copy"</dt>
	<dd th:insert="include/footer::copy"></dd>
	<dt>th:insert="~{include/footer::copy}"</dt>
	<dd th:insert="~{include/footer::copy}"></dd>
	<dt>th:insert="~{include/footer::#copy-section}"</dt>
	<dd th:insert="~{include/footer::#copy-section}"></dd>
	<dt>th:replace="include/footer::copy"</dt>
	<dd th:replace="include/footer::copy"></dd>
	<dt>th:replace="include/footer::#copy-section"</dt>
	<dd th:replace="include/footer::#copy-section"></dd>
	<dt>th:include="include/footer::copy"</dt>
	<dd th:include="include/footer::copy"></dd>
	<dt>th:include="include/footer::#copy-section"</dt>
	<dd th:include="include/footer::#copy-section"></dd>
	
	<dt>th:include="include/footer::frag(2013,${bean.name})"</dt>
	<dd th:include="include/footer::frag(2013,${bean.name})"></dd>
	<dt>th:include="include/footer::frag(year=2014,org=${bean.name})"</dt>
	<dd th:include="include/footer::frag(year=2014,org=${bean.name})"></dd>
	<dt>th:include="include/footer::frag_b(year=2015,org=${bean.name})"</dt>
	<dd th:include="include/footer::frag_b(year=2015,org=${bean.name})"></dd>
	<dt>th:include="include/footer::frag_b(year=2016)" th:with="year=2017,org=${bean.name}"</dt>
	<dd th:include="include/footer::frag_b(year=2016)" th:with="year=2017,org=${bean.name}"></dd>
	
	<h5>th:assert</h5>
	<span th:assert="${!#strings.isEmpty(bean.name)}">...</span>

	<h5>[# Textual syntax]</h5>
	[# th:each="item : ${list}"]
	- [[${item.name}]]
	[/]
	<hr/>
	[# th:each="item : ${map}"]
	- [[${item}]]
	[/]
	<hr/>
	[#th:block th:each="item : ${list}"]
	- [#th:block th:utext="${item.name}" /]
	[/th:block]
	<hr/>
	[# th:each="item : ${list}"]
	- [# th:utext="${item.name}" /]
	[/]
	<hr/>
</body>
</html>